<template>
  <div>
    <MusicLaoding v-if="laoding" />
    <div v-else>
      <div class="back">
        <van-icon name="arrow-left" @click="back" size="22" />
        <span style="color:#fafafa;">{{ msg }}</span>
      </div>
      <div class="box">
        <!-- 歌手背景图片 -->
        <van-sticky offset-top="-190">
          <div class="img_box">
            <img :src="cover + '?param=600y400'" alt="" />
            <van-tag
              class="tags"
              color="#fff"
              @click="plus"
              v-show="show"
              v-if="isSinger"
              size="large"
              text-color="#ad0000"
            >
              <van-icon name="checked" color="#ad0000" /> 已关注</van-tag
            >
            <van-tag
              class="tags"
              color="#11bf7"
              @click="plus"
              v-show="show"
              v-else
              size="large"
              text-color="#11bf70"
            >
              <van-icon name="add" color="#11bf72"  /> 关注</van-tag
            >
          </div>
        </van-sticky>
        <!-- 歌曲列表 -->
        <div class="music_list">
          <van-tabs line-width="22px"  title-inactive-color="#111" color="#11bf72" title-active-color="#11bf72" v-model="active" sticky offset-top="50">
            <van-tab title="热门50单曲">
              <MusicSingle :songs="songs" />
            </van-tab>
            <van-tab title="专辑">
              <MusicAlbum :album="album" />
            </van-tab>
            <van-tab title="百科">
              <MusicIntroduce :introduce="introduce" />
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";
import MusicSingle from "./single.vue";
import MusicAlbum from "./album.vue";
import MusicIntroduce from "./introduce.vue";
import MusicLaoding from "../common/laoding.vue";
import { GetdetailAPI, GetartistsAPI, GetalbumAPI } from "@/api/api.js";
import { mapState } from "vuex";
export default {
  name: "MusicIndex",
  components: { MusicSingle, MusicAlbum, MusicIntroduce, MusicLaoding },
  data() {
    return {
      active: 0,
      isShow: false,
      laoding: true,
      show: true,
      msg: "",
      cover: "",
      songs: [],
      album: [],
      introduce: [],
      singerId: this.$route.query.id,
      albumSize: 0,
      mvSize: 0,
      musicSize: 0,
    };
  },

  mounted() {
    let id = this.$route.query.id || this.$route.query.arId;
    axios
      .all([GetdetailAPI({ id }), GetartistsAPI({ id }), GetalbumAPI({ id })])
      .then(
        axios.spread((GetdetailAPI, GetartistsAPI, GetalbumAPI) => {
          this.cover = GetdetailAPI.data.data.artist.cover;
          this.albumSize = GetdetailAPI.data.data.artist.albumSize;
          this.mvSize = GetdetailAPI.data.data.artist.mvSize;
          this.musicSize = GetdetailAPI.data.data.artist.musicSize;

          this.msg = GetdetailAPI.data.data.artist.name;
          this.songs = GetartistsAPI.data.hotSongs;
          this.album = GetalbumAPI.data.hotAlbums;
          this.introduce = GetdetailAPI.data.data.artist;
          if (GetalbumAPI.status == 200) {
            this.$nextTick(function () {
              this.laoding = false;
            });
          }
        })
      );
    window.addEventListener("scroll", this.handleScroll, true); //监听窗口
    this.$nextTick(function () {
      this.judgeSingers();
    });
  },
  computed: {
    ...mapState(["attentionSingerList"]),
    isSinger() {
      return this.isShow;
    },
  },
  methods: {
    back() {
      this.$router.go("-1");
    },
    handleScroll() {
      if (window.pageYOffset >= 190) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    plus() {
      //添加歌手
      this.isShow = !this.isShow;
      const newSingers = {
        id: this.singerId,
        ar: this.msg,
        cover: this.cover,
        albumSize: this.albumSize,
        mvSize: this.mvSize,
        musicSize: this.musicSize,
      };
      if (this.isShow) {
        this.$nextTick(function () {
          this.$store.commit("SET_ATTSINGER", newSingers);
          this.isShow = true;
          Toast("成功关注");
          return;
        });
      } else {
        const singers = this.attentionSingerList;
        for (let i = 0; i < singers.length; i++) {
          const element = singers[i];
          if (element.id == this.singerId) {
            this.$nextTick(function () {
              this.$store.commit("SET_SLICESINGERS", i);
              this.isShow = false;
              Toast("已取消关注");
              return;
            });
          }
        }
      }
    },
    judgeSingers() {
      //监听
      const singers = this.attentionSingerList;
      for (let i = 0; i < singers.length; i++) {
        const element = singers[i];
        if (element.id == this.singerId) {
          this.isShow = true;
          return;
        }
      }
      return;
    },
  },
};
</script>

<style lang="less" scoped>
.back {
  z-index: 999;
  position: fixed;
  top: .3125rem;
  left: 0rem;
  height: 2.5rem;
  width: 100%;
  line-height: 2.5rem;
  display: flex;

  .van-icon {
    height: 2.5rem;
    width: 1.875rem;
    font-size: 1.5625rem;
    line-height: 2.5rem;
    color: #fff;
  }
  span:nth-child(2) {
    flex: 1;
    font-size: .875rem;
    color: #fff;
    font-weight: bold;
    padding-right: 1.875rem;
  }
}
.img_box {
  position: relative;
  height: 15rem;
  .tags {
    z-index: 99;
    position: absolute;
    bottom: .3125rem;
    left: 50%;
    background-color: #fff;
    transform: translateX(-50%);
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>